<!DOCTYPE html>
<html lang="en">

	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<meta http-equiv="X-UA-Compatible" content="ie=edge">
		<title>渲染表格</title>
		<style type="text/css">
			table{
			    border-collapse: collapse; 
			    border-right: 1px solid #ccc;
			    border-bottom: 1px solid #ccc;
			    text-align:center;
			}
			table td{
			    width: 80px;
			    height: 30px;
			    border: 1px solid;
			}
		</style>
	</head>
	<body>
		<table id="table1">
			<tr>
				<td>姓名</td>
				<td>语文</td>
				<td>数学</td>
				<td>外语</td>
				<td>体育</td>
				<td>总分</td>
			</tr>
		</table>
		<script src="../js/jquery-3.5.1.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			$(function() {
				function ones() {
					// 请求获取数据
					$.ajax({
						url: "score.json",
						type: "GET",
						dataType: "json",
						success: function(result) { //成功操作
							res = result.data;
							console.log(res);
							var tab = $("#table1")[0];
							tab = tab.childNodes[1]; //tbody标签

							for (var i = 0; i < res.length; i++) {
								//循环添加
								if (i < res.length - 1) { //前面接收数据
									var tr = $("<tr>"); //创建tr标签
									var td1 = $("<td>"); //创建td标签
									td1.text(res[i].name);
									var td2 = $("<td>"); //创建td标签
									td2.text(res[i].chinese);
									var td3 = $("<td>"); //创建td标签
									td3.text(res[i].math);
									var td4 = $("<td>"); //创建td标签
									td4.text(res[i].English);
									var td5 = $("<td>"); //创建td标签
									td5.text(res[i].PE);
									var td6 = $("<td>"); //创建td标签
									td6.text(parseInt(res[i].chinese) + parseInt(res[i].math) +
										parseInt(res[i].English) + parseInt(res[i].PE));
									tr.append(td1);
									tr.append(td2);
									tr.append(td3);
									tr.append(td4);
									tr.append(td5);
									tr.append(td6);
									tab.append(tr[0]);
								} else { //最后一行的数据
									var tr = $("<tr>"); //创建tr标签
									var td1 = $("<td>"); //创建td标签
									td1.html("平均分");
									var td2 = $("<td>"); //创建td标签
									var t1 = 0;
									var t2 = 0;
									var t3 = 0;
									var t4 = 0;
									var t5 = 0;
									var trs = $(tab).children("tr"); //获取tr标签
									for (var i = 0; i < res.length - 1; i++) {
										t1 = parseInt(t1) + parseInt(res[i].chinese);
										t2 = parseInt(t2) + parseInt(res[i].math);
										t3 = parseInt(t3) + parseInt(res[i].English);
										t4 = parseInt(t4) + parseInt(res[i].PE);
										var tds = trs[i + 1].childNodes;
										//使用$(tds[5])将js对象变为jq
										t5 = parseInt(t5) + parseInt($(tds[5]).text());
									}
									td2.html((t1 / (res.length - 1)).toFixed(2));
									var td3 = $("<td>"); //创建td标签
									td3.html((t2 / (res.length - 1)).toFixed(2));
									var td4 = $("<td>"); //创建td标签
									td4.html((t3 / (res.length - 1)).toFixed(2));
									var td5 = $("<td>"); //创建td标签
									td5.html((t4 / (res.length - 1)).toFixed(2));
									var td6 = $("<td>"); //创建td标签
									td6.html((t5 / (res.length - 1)).toFixed(2));
									tr.append(td1);
									tr.append(td2);
									tr.append(td3);
									tr.append(td4);
									tr.append(td5);
									tr.append(td6);
									tab.append(tr[0]);
								}
							}
						},
						error: function() {
							console.log("请求失败！！")
						}
					});
				};
				ones();
			})
		</script>
	</body>
</html>